:root {
  --primary-color: #1B1E24;
  --secondary-color: #1B1E24;
  --font-color: #1B1E24;
  --bg-color: #fff;
  --heading-color: #1B1E24;
}

[data-theme="dark"] {
  --primary-color: #fff;
  --secondary-color: #fff;
  --font-color: #fff;
  --bg-color: #1B1E24;
  --heading-color: #fff;
}

body {
  background-color: var(--bg-color);
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 97vh;
}
.container .content h1{
  color: var(--primary-color);
  font-family: "Dosis",sans-serif;
  font-size: 5rem;
}
.container .content p {
  color: var(--primary-color);
  font-family: "Dosis",sans-serif;
  font-size: 3rem;
}
.container .content h6{
  color: var(--primary-color);
  font-family: "Dosis",sans-serif;
  font-size: 1rem;
}
.header {
  position: absolute;
  top: 10px;
  right: 20px;
}
.header .moon, .header .sun {
  width: 34px;
  cursor: pointer;
  transition: .5s all ease-in-out;
}
.header .sun:hover {
  -webkit-animation: sun_rotate 1s infinite;
          animation: sun_rotate 1s infinite;
}
.header .moon:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.header .hide {
  display: none;
}

@-webkit-keyframes sun_rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes sun_rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}





#bg_wheel{
    animation-play-state: paused;
}
#bg_wheel:hover{
    animation-play-state: running;
}
#bg_wheel:hover {
	-webkit-animation: wheeling 12s linear alternate infinite;
   -moz-animation: wheeling 12s linear alternate infinite;
   animation: wheeling 12s linear alternate infinite;
}
@keyframes wheeling {
   0% {
       -webkit-transform: rotate(0deg);
       -webkit-transform-origin: 50% 50%;
       -moz-transform: rotate(0deg);
       -moz-transform-origin: 50% 50%;
       transform: rotate(0deg);
       transform-origin: 50% 50%;
    }
    100% {
       -webkit-transform: rotate(-360deg);
       -webkit-transform-origin: 50% 50%;
       -moz-transform: rotate(-360deg);
       -moz-transform-origin: 50% 50%;
       transform: rotate(-360deg);
       transform-origin: 50% 50%;
    }
}

g#bell:hover {
    animation-play-state: paused;
}
g#bell {
    animation-play-state: running;
    -webkit-animation: swinging 1s ease-in-out alternate infinite;
    -moz-animation: swinging 1s ease-in-out alternate infinite;
    animation: swinging 1s ease-in-out alternate infinite;
}
@keyframes swinging {
    0% {
       -webkit-transform: rotate(3deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(3deg);
       -moz-transform-origin: top center;
       transform: rotate(3deg);
       transform-origin: top center;
    }
    100% {
       -webkit-transform: rotate(-3deg);
       -webkit-transform-origin: top center;
       -moz-transform: rotate(-3deg);
       -moz-transform-origin: top center;
       transform: rotate(-3deg);
       transform-origin: top center;
    }
}

#gg > stop:nth-child(3) {
    -webkit-animation: waves 4s ease-in-out alternate infinite;
    -moz-animation: waves 4s ease-in-out alternate infinite;
    animation: waves 4s ease-in-out alternate infinite;
}

@keyframes waves {
    0% {
        stop-color: #0d90e1; /*	hsl(203, 89%, 47%) */
    }
    50% {
         stop-color: #0a67a1; /*	hsl(203, 88%, 34%) */
    }
    100% {
         stop-color: #0d90e1;
    }
}
#gg > stop:nth-child(2) {
    -webkit-animation: waves2 4s ease-in-out alternate infinite;
    -moz-animation: waves2 4s ease-in-out alternate infinite;
    animation: waves2 4s ease-in-out alternate infinite;
}
@keyframes waves2 {
    0% {
        stop-color: #0d90e1;
    }
    50% {
         stop-color: #ffffff;
    }
    100% {
         stop-color: #0d90e1;
    }
}
#nfu:hover {
    transform: scale(2); 
}
g#title_zh, g#title_en {
    -webkit-animation: fill_shift 3s linear alternate infinite;
    -moz-animation: fill_shift 3s linear alternate infinite;
    animation: fill_shift 3s linear alternate infinite;
}
@keyframes fill_shift {
    /* lighter 0d90e1  #0a67a1 hsla(203, 88%, 34%, 1.0)  darker #043350 */
    0% {
    fill: hsla(203, 88%, 34%, 1.0);
    }
    50% {
    fill: hsla(23, 88%, 34%, 1.0);
    }
    100% {
    fill: hsla(-157, 88%, 34%, 1.0);
    }
}
  
